<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    width="1024px"
    top="30vh"
    @closed="reset"
  >
    <div class="btn-head">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="onAdd">添加</el-button>
      <div class="title-btn">
        <el-button v-for="(i) in btnsList" :key="i.id" @click.stop="toPush(i.id)">{{ i.txt }}</el-button>
      </div>
    </div>
    <div class="ext-table">
      <el-card v-for="item in cardList" :key="item.orderNo" :class="item.orderNo&&currentItem.orderNo===item.orderNo?'c-card-active':''" class="c-card" :shadow="item.orderNo&&currentItem.orderNo===item.orderNo ? 'always' : 'never'" @click.native="currentSelect(item)">
        <div>{{ item.checkTypeName }}</div>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        保存
      </el-button>
    </div>
    <el-dialog
      width="30%"
      top="30vh"
      :title="innerTitle"
      :visible.sync="innerVisible"
      append-to-body
      @close="innerReset"
    >
      <el-form ref="dataForm" class="form" inline>
        <el-form-item label="分类">
          <el-input v-model="form.classTitle" maxlength="15" placeholder="请输入分类标题" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import { gasCheckQueryList, gasCheckSave } from '@/api'

  export default {
    name: 'classification',
    data() {
      return {
        visible: false,
        innerVisible: false,
        title: '',
        innerTitle: '',
        btnsList: [
          { txt: '编辑', id: 1 },
          { txt: '删除', id: 2 },
          { txt: '上移', id: 3 },
          { txt: '下移', id: 4 },
          { txt: '最前', id: 5 },
          { txt: '最后', id: 6 }
        ],
        cardList: [{}, {}],
        isEditing: false,
        currentItem: {},
        form: {
          classTitle: ''
        },
        treeVal: {},
        cardVal: {}
      }
    },
    async created() {

    },
    methods: {
      async open(cardVal, treeVal) {
        this.title = `${cardVal.title}--->数据来源:${treeVal.orgName}`
        this.cardVal = cardVal
        this.treeVal = treeVal
        console.log(cardVal, this.treeVal)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.getDefaultData(treeVal)
        })
      },
      async getDefaultData(treeVal) {
        const params = {
          orgId: treeVal.orgId,
          csmType: this.cardVal.value
        }
        const res = await gasCheckQueryList(params)
        this.cardList = res.data
      },
      currentSelect(item) {
        this.currentItem = item
      },
      toPush(type) {
        if (!this.currentItem.orderNo) {
          this.$message.warning('请选择一条数据后操作！')
          return
        }
        const index = this.cardList.findIndex(item => item.orderNo === this.currentItem.orderNo)
        switch (type) {
        case 1:
          this.innerTitle = '编辑'
          this.innerVisible = true
          this.isEditing = true
          this.form.classTitle = this.currentItem.checkTypeName
          break
        case 2:
          this.cardList = this.cardList.filter(item => item.checkTypeId !== this.currentItem.checkTypeId)
          break
        case 3:
          if (index !== 0) {
            const optionData = this.cardList[index - 1 ] // 获取上一条数据
            this.cardList[index] = optionData // 把一条数据复制给当前数据
            this.cardList[index - 1] = this.currentItem // 把当前数据复制给上一个数据
            this.cardList = [...this.cardList] // 从新复制数据
          } else {
            this.$message.warning('已是最前')
          }
          break
        case 4:
          if (index !== this.cardList.length - 1) {
            const optionData = this.cardList[index + 1 ]
            this.cardList[index] = optionData
            this.cardList[index + 1] = this.currentItem
            this.cardList = [...this.cardList]
          } else {
            this.$message.warning('已是最后')
          }
          break
        case 5:
          if (index !== 0) {
            const optionData = this.cardList[0]
            this.cardList[index] = optionData
            this.cardList[0] = this.currentItem
            this.cardList = [...this.cardList]
          } else {
            this.$message.warning('已是最前')
          }
          break
        case 6:
          if (index !== this.cardList.length - 1) {
            const optionData = this.cardList[ this.cardList.length - 1 ]
            this.cardList[index] = optionData
            this.cardList[this.cardList.length - 1] = this.currentItem
            this.cardList = [...this.cardList]
          } else {
            this.$message.warning('已是最后')
          }
          break
        default:
          break
        }
      },
      onAdd() {
        this.innerVisible = true
        this.innerTitle = '添加'
        this.isEditing = false
      },
      onComfirm() {
        if (!this.form.classTitle) {
          this.$message.error('请输入分类标题')
          return
        }
        if (this.isEditing) {
          const i = this.cardList.findIndex(item => item.checkTypeId === this.currentItem.checkTypeId)
          this.cardList[i].checkTypeName = this.form.classTitle
        } else {
          const params = {
            checkTypeName: this.form.classTitle,
            orderNo: this.cardList.length + 1
          }
          this.cardList.push(params)
        }
        this.innerVisible = false
      },
      async success() {
        const params = this.cardList.map((item, index) => ({
          ...item,
          orderNo: index + 1,
          orgId: this.treeVal.orgId,
          orgSNNo: this.treeVal.orgSNNo,
          orgName: this.treeVal.orgName,
          csmType: this.cardVal.value
        }))

        const res = await gasCheckSave(params)
        if (res && res.data) {
          this.$message.success('操作成功')
          this.visible = false
        }
      },
      reset() {
        this.isEditing = false
        this.currentItem = {}
      },
      innerReset() {
        this.form = {
          classTitle: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-dialog .el-dialog__body {
  padding-top: 20px !important;
}
.btn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.c-card {
  margin-bottom: 20px;
  cursor: pointer;
  /deep/ .el-card__body {
    padding: 10px 20px;
  }
}
.c-card-active {
  border: 1px solid #617ff8;
  box-shadow: 0 3px 6px 0 undef;
}
</style>
